<template>
  <div class="headerTitle">个税信息</div>
  <div class="mainArea">
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gsInfo"
      >
        <up-form-item
          label="个税单位名称"
          prop="gsUnit"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gsInfo.gsUnit"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gsInfo"
      >
        <up-form-item
          label="本年度收入合计(元)"
          prop="yearGet"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gsInfo.yearGet"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="400rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gsInfo"
      >
        <up-form-item
          label="现单位工作时间月数(月)"
          prop="workMonthNum"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gsInfo.workMonthNum"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">本年度收入月份</div>
      <div class="itemValue" @click="getMonthNumShow = true">
        <div>
          {{ gsInfo.getMonthNum ? gsInfo.getMonthNum : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="getMonthNumShow"
          :columns="getMonthNumCols"
          :defaultIndex="[0]"
          @cancel="getMonthNumShow = false"
          @confirm="checkGetMonthNum"
        ></up-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gsInfo"
      >
        <up-form-item
          label="上一年度收入合计(元)"
          prop="lastYearGet"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gsInfo.lastYearGet"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
  </div>

  <div class="headerTitle">材料要求</div>
  <div class="askArea">
    <div class="askItem">1、提供个税APP详细照片</div>
  </div>

  <div class="headerTitle">相关证明材料影像件</div>
  <div class="mainArea">
    <up-textarea
      v-model="moreInfo"
      placeholder="请输入"
      autoHeight
      border="none"
    >
    </up-textarea>
    <div class="addImgArea">
      <img
        src="../../static/face/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn close" @click="closePage">关闭</div>
      <div class="btn save" @click="savePage">保存</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
import { useImagePicker } from '@/hooks/useImagePicker';
const { imgList, chooseImg, uploadFiles } = useImagePicker();
const store = useAppStore();
onMounted(() => {
  let nowDate = new Date();
  let monthNum = nowDate.getMonth() + 1; //当前月份
  for (let i = 1; i <= monthNum; i++) {
    getMonthNumCols[0].push(i);
  }
});
const isCheck = ref(false);
let orderId = null;
onLoad((option) => {
  let param = JSON.parse(option.value);
  if (param.isCheck) {
    isCheck.value = true;
    http.creditPersonalTaxDetail().then((res) => {
      gsInfo.gsUnit = res.data.depositoryCompany;
      gsInfo.lastYearGet = res.data.lastYearTotalIncome;
      gsInfo.yearGet = res.data.yearTotalIncome;
      gsInfo.getMonthNum = res.data.incomeMonth;
      gsInfo.workMonthNum = res.data.workMonth;
      moreInfo.value = res.data.supplementExplain;
    });
  } else {
    orderId = param.orderId;
  }
});
const moreInfo = ref("");
const gsInfo = reactive({
  gsUnit: "", //个税单位名称
  lastYearGet: "", //上一年度收入合计
  yearGet: "", //本年度收入合计
  getMonthNum: "", //本年度收入月份
  workMonthNum: "", //现单位工作时间月数
});
// 公积金类型
const getMonthNumShow = ref(false);
const getMonthNumCols = reactive([[]]);
const checkGetMonthNum = (e) => {
  // #业务代码
  console.log(e.value[0]);
  gsInfo.getMonthNum = e.value[0];
  getMonthNumShow.value = false;
};


// 关闭
const closePage = () => {
  wx.navigateBack();
};
// 保存
const savePage = async () => {
  if (isCheck.value) {
    wx.navigateBack({ delta: 1 });
  } else {
    const fileInfoList = await uploadFiles();  
    console.log('fileInfoList----', fileInfoList);
    http
      .creditPersonalTaxAdd({
        creditFirstType: "2",
        creditSecondType: "3",
        orderId,
        creditId: store.creditId,
        depositoryCompany: gsInfo.gsUnit,
        lastYearTotalIncome: gsInfo.lastYearGet,
        yearTotalIncome: gsInfo.yearGet,
        incomeMonth: gsInfo.getMonthNum,
        workMonth: gsInfo.workMonthNum,
      })
      .then((res) => {
        wx.showToast({
          title: "保存成功",
          icon: "none",
          duration: 1000,
          mask: true,
        });
        setTimeout(() => {
          wx.navigateBack();
        }, 1000);
      })
      .catch((err) => {
        wx.showToast({
          title: "保存失败",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      });
  }
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.askArea {
  padding: 10rpx 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  .askItem {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #666666;
  }
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .formItem {
    padding-left: 5rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .selectIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
        margin-left: 13rpx;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
      margin: 20rpx 10rpx;
    }
  }
  .btnArea {
    display: flex;
    padding: 40rpx 0;
    justify-content: center;
    align-items: center;
    .btn {
      width: 110rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin: 0 10rpx;
    }
    .close {
      background-color: #c0c0c0;
    }
    .save {
      background-image: linear-gradient(to right, #619df1, #4478c1);
    }
  }
}
</style>
